<template>
  <div class="breadcrumb">
    <div class="company-selector">
      <div class="current-company" @click="toggleMenu" @blur="closeMenu" tabindex="0">
        <span>{{ currentCompany }}</span>
        <el-icon :size="16" :class="{ 'rotate': showMenu }">
          <CaretBottom />
        </el-icon>
      </div>

      <transition name="slide-fade">
        <ul v-show="showMenu" class="company-menu" @mousedown.prevent :style="{ paddingTop: companyDataStore.companyList.length > 0 ? '6px' : '0'}">
          <li v-for="company in companyDataStore.companyList" :key="company.id" @click="selectCompany(company)"
            @mouseenter="hoverIndex = company.id" @mouseleave="hoverIndex = null" v-show="company.is_enable == 1">
            <div class="company" :class="{
              'hover': hoverIndex === company.id,
              'selected': company.is_default === 1
            }">
              <div class="company-name">
                {{ company.name }}
                <img src="../assets/enterprise/yirenzheng.png" v-if="company.status == 1">
                <img src="../assets/enterprise/weirenzheng.png" v-else>
              </div>
              <div class="company-admin">
                <i v-if="company.username">{{ company.username }}</i>
                <span v-for="(value, index) in company.rolename.split(',')" :key="index">{{ value }}</span>
              </div>
            </div>
          </li>
          <div class="menu">
            <div class="menu-item" @click="creatCompany">创建企业</div>
            <div class="menu-item" @click="joinCompany">加入企业</div>
            <!-- <div class="menu-item" @click="toggleMenu">找回企业</div> -->
          </div>
        </ul>
      </transition>
    </div>
    <div class="hello">{{ hello }}</div>
    <CreateCompany />
    <JoinCompany />
  </div>
</template>

<script setup>
import { useCompanyDataStore } from '@/store/companys'
import { CaretBottom } from '@element-plus/icons-vue'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'

import { useChatDataStore } from '@/store/chat'
import { loginIm } from '@/utils/loginIm'
import CreateCompany from './CreateCompany.vue'
import JoinCompany from './JoinCompany.vue'

const router = useRouter()

const companyDataStore = useCompanyDataStore()
const chatDataStore = useChatDataStore()
const currentCompany = computed(() => {
  if (companyDataStore.defaultCompany && companyDataStore.defaultCompany.is_enable == 1) {
    return companyDataStore.defaultCompany.name
  } else {
    return '暂无企业'
  }
})

const showMenu = ref(false)
const hoverIndex = ref(null)

const hello = computed(() => {
  const time = new Date()
  const hour = time.getHours()
  if (hour < 6) { return '凌晨好！' }
  else if (hour < 9) { return "早上好！" }
  else if (hour < 12) { return "上午好！" }
  else if (hour < 14) { return "中午好！" }
  else if (hour < 17) { return "下午好！" }
  else if (hour < 19) { return "傍晚好！" }
  else if (hour < 22) { return "晚上好！" }
  else { return "夜里好！" }
})

const toggleMenu = () => {
  showMenu.value = !showMenu.value
}

const closeMenu = () => {
  showMenu.value = false
}

const selectCompany = (company) => {
  if (company.is_default == 1) {
    return
  }
  if (company.status == 1) {
    router.replace({ name: "home" });
    companyDataStore.setDefaultCompany(company);
  }
  companyDataStore.checkAuth(company)
  showMenu.value = false
}

const clickOutsideHandler = (e) => {
  const selector = document.querySelector('.company-selector')
  if (!selector.contains(e.target)) {
    closeMenu()
  }
}

const creatCompany = () => {
  companyDataStore.createDialogVisible = true
}

const joinCompany = () => {
  companyDataStore.joinDialogVisible = true
}

onMounted(async () => {
  document.addEventListener('click', clickOutsideHandler)
  await companyDataStore.init()
  await companyDataStore.getCompanyInfo()
  await loginIm()
  chatDataStore.initChat()

})

onUnmounted(() => {
  document.removeEventListener('click', clickOutsideHandler)
})

</script>
<style scoped lang="scss">
.breadcrumb {
  position: relative;
  flex: 1;

  .company-selector {
    position: relative;
    display: inline-block;

    .current-company {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s;
      padding: 4px 0;
      font-size: 20px;
      color: #01509f;
      font-weight: bold;

      span {
        margin-right: 8px;
      }

      .el-icon {
        transition: transform 0.3s;

        &.rotate {
          transform: rotate(180deg);
        }
      }
    }

    .company-menu {
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: 8px;
      min-width: 300px;
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
      list-style: none;
      z-index: 1000;
      overflow-y: auto;
      max-height: calc(100vh - 300px);

      li {
        padding: 2px 10px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;

        .company {
          padding: 10px;
          border-radius: 5px;
        }

        .company.hover {
          background: #f5f7fa;
          color: #01509f;
        }

        .company.selected {
          color: #01509f;
          font-weight: 500;
          background: rgba(1, 80, 159, 0.08);
        }

        .company-name {
          font-size: 16px;
          color: #666;

          img {
            margin-left: 5px;
          }
        }

        .company-admin {
          margin-top: 10px;

          span {
            font-size: 12px;
            color: #01509f;
            padding: 1px 5px;
            border: #01509f solid 1px;
            border-radius: 5px;
            margin-right: 5px;
          }

          i {
            font-style: normal;
            margin-right: 10px;
            color: #999;
          }
        }
      }

      .menu {
        display: flex;
        height: 42px;
        align-items: center;
        border-top: solid 1px #eee;

        .menu-item {
          flex: 1;
          text-align: center;
          cursor: pointer;
          font-size: 14px;
          color: #01509f;
          height: 100%;
          line-height: 42px;

          &:nth-child(2) {
            border-left: solid 1px #eee;
            border-right: solid 1px #eee;
          }
        }
      }
    }
  }

  .hello {
    font-size: 14px;
    margin-top: 5px;
  }
}

.slide-fade-enter-active {
  transition: all 0.2s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
</style>
